<template>
  <div
    class="foot-box"
    :style="{
      width: configOption.scheme == loginPlan.MARK_LOGIN_LOGINMETHOD_1 ? '360px' : '360px',
      'margin-top': configOption.scheme == loginPlan.MARK_LOGIN_LOGINMETHOD_1 ? '76px' : '76px',
    }"
  >
    <div class="lang-item">
      <img :src="handle.chinaIcon" class="img-icon" alt="" />
      <span>{{ handle.china }}</span>
    </div>
    <div class="lang-item">
      <img :src="handle.ukIcon" class="img-icon" alt="" />
      <span>{{ handle.uk }}</span>
    </div>
  </div>
</template>

<script>
  import { defineComponent, ref, toRefs, nextTick } from 'vue';
  import { useI18n } from '@common/locales';
  import { LOGIN_WAY, EVENT_METHOD, LOGIN_PLAN } from '@/helper/constant';
  import VueEvent from '@/helper/event';
  export default defineComponent({
    name: 'LoginFooter',
    setup() {
      const t = useI18n().t;
      let configOption = ref({ scheme: LOGIN_PLAN.MARK_LOGIN_LOGINMETHOD_1 });
      const state = {
        loginWay: LOGIN_WAY,
        loginPlan: LOGIN_PLAN,
        eventMethod: EVENT_METHOD,
        handle: {
          china: t('foot.china'),
          chinaIcon:
            '',
          uk: t('foot.uk'),
          ukIcon:
            '',
        },
      };
      const methods = {
        triggerConfig(data) {
          nextTick(() => {
            //监听登录页面配置信息
            configOption.value = { ...data };
          });
        },
      };
      //监听事件
      VueEvent.on(state.eventMethod.LOGIN_METHOD, methods.triggerConfig);
      return {
        configOption,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .foot-box {
    width: 360px;
    display: flex;
    justify-content: end;
    // margin: 70px auto 0;
    margin: 0 auto;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    .lang-item {
      display: inline-block;
      align-items: center;
      height: 20px;
      padding-left: 10px;
      font-size: 14px;
      color: #3f3f3f;
      cursor: pointer;
      .img-icon {
        width: 14px;
        opacity: 0.8;
        margin-right: 4px;
      }
    }
  }
</style>
